<template>
    <div class="hot">
        <p>本店热卖</p>
        <template v-if="data.length>0">
            <el-card class="hot-item" v-for="item in data" :key="item.Id"
                     @click.native="$router.push({name:'productDetail',query:{id:item.Id,t:Date.now()}})">
                <el-image :src="item.shangping_tupian"
                          class="image">
                    <div slot="placeholder" class="placeholder">
                        <i class="el-icon-loading"></i>
                    </div>
                </el-image>
                <div style="padding: 5px;">
                    <div class="m-b">
                        <el-link type="primary">{{item.shangping_mingcheng}}</el-link>
                    </div>
                    <div class="top">
                        <span class="text-md text-danger font-bold"> <span class="text-sm">¥</span> {{(item.shangping_danjia / 100).toFixed(2)}}</span>

                        <div class="rate">
                            <template v-if="item.shangping_xiaoliang_xingji">
                                <el-rate
                                        v-model="item.shangping_xiaoliang_xingji"
                                        disabled
                                        text-color="#ff9900">
                                </el-rate>
                            </template>
                            <template v-else>
                                <i class="iconfont icon-xin  text-danger"></i>
                            </template>
                        </div>

                    </div>


                </div>
            </el-card>
        </template>

        <div class="text-center" v-else>
            暂无热卖商品
        </div>
    </div>
</template>

<script>
    export default {
        name: 'hotGameList',
        components: {},
        props: ['data'],
        data() {
            return {}
        },
        computed: {},
        methods: {},
        mounted() {
        },
    }
</script>

<style lang="less" scoped>
    .hot {
        flex: 0 0 18%;
        background: #FAFBFC;
        padding: 8px 15px;
        min-height: 500px;

        p {
            font-weight: bold;
            font-size: 15px;
            padding-left: 3px;
            border-left: 3px solid #282828;
            margin: 10px 0;
        }

        .hot-item {
            margin: 15px 0;
            cursor: pointer;

            /deep/ .el-card__body {
                padding: 0;
            }

            .top {
                display: flex;
                justify-content: space-between;

                .rate {
                    display: flex;
                    justify-content: space-between;
                }
            }

            /deep/ .el-image__inner {
                transition: all .6s;
            }

            &:hover {
                /deep/ .el-image__inner {
                    transform: scale(1.1);
                }
            }

            .image {
                height: 200px;
                width: 100%;
            }

            img {
                width: 100%;
                object-fit: cover;

            }

        }
    }
</style>
